<template>
    <div class="white-box">
        <div class="table-mb">
            <el-button type="primary" @click="addTemplate">添加快递方式</el-button>
        </div>
        <div class="task-one">
            <div class="task-one__item">
                <span class="task-one__label">配送模板：</span>
                <el-input placeholder="输入配送模板名称" v-model.trim="express_title" size="default" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">物流公司：</span>
                <el-input placeholder="输入物流公司名称" v-model.trim="company_title" size="default" clearable></el-input>
            </div>
            <div class="task-one__item">
                <span class="task-one__label">计费方式：</span>
                <el-select v-model="valuation_types" clearable placeholder="请选择计费方式">
                    <el-option label="全部" value="0" />
                    <el-option label="按件数" value="1" />
                    <el-option label="按重量" value="2" />
                    <el-option label="按体积" value="3" />
                    <el-option label="按装箱" value="4" />
                </el-select>
            </div>
            <div class="task-one__btn clearfix">
                <el-button type="primary" :loading="search_btn" :icon="Search" @click="handleSearch">搜索</el-button>
            </div>
        </div>

        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <el-table-column prop="express_title" label="模板名称" min-width="200"> </el-table-column>
            <el-table-column prop="company_title" label="快递公司" min-width="200"> </el-table-column>
            <el-table-column label="计费方式" width="120">
                <template #default="{ row }">
                    <span style="color: #4b93fa">{{ row.valuation_type_label }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="min_weight" label="最小配送重量(kg)" width="140"> </el-table-column>
            <el-table-column prop="max_weight" label="最大配送重量(kg)" width="140"> </el-table-column>
            <el-table-column label="配送备注" min-width="200">
                <template #default="{ row }">
                    <el-popover placement="top" :width="800" trigger="hover" :content="row.intro">
                        <template #reference>
                            <div class="line-two">{{ row.intro }}</div>
                        </template>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="170" class-name="operation-nav" fixed="right">
                <template #default="{ row }">
                    <el-button class="theme-btn" link type="primary" @click="clickConfig(row.shipping_id)">配置区域</el-button>
                    <el-popconfirm title="是否确定删除？" confirm-button-text="确定" cancel-button-text="取消" @confirm="handleDelete(row)">
                        <template #reference>
                            <el-button class="theme-btn" link type="primary">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>

        <!-- 添加快递方式 -->
        <el-dialog
            v-model="dialogUpdate"
            title="添加快递方式"
            width="560px"
            :close-on-click-modal="false"
            :append-to-body="true"
            :destroy-on-close="true"
            @close="closeTemplate"
        >
            <div class="tag-item">
                <div class="tag-item__label">快递方式</div>
                <div class="tag-item__right">
                    <el-select v-model="company_id" placeholder="请选择快递方式" style="width: 100%" @change="changeSelect">
                        <el-option :label="item.title" :value="item.company_id" v-for="item in options_express" :key="item.company_id"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="tag-item" style="margin-top: 20px" v-show="valuation_type">
                <div class="tag-item__label">计费方式</div>
                <div class="tag-item__right">{{ valuation_type }}</div>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" :loading="form_loading" @click="confirmTemplate">确认</el-button>
                    <el-button @click="closeTemplate">取消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>

    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted, watch } from "vue"
import { useRouter, useRoute } from "vue-router"
import { Search } from "@element-plus/icons-vue"
import GoBack from "@components/GoBack.vue"
import OneLoad from "@mixins/one-load"

const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()

let exp_id = route.query.exp_id || ""
onMounted(() => {
    exp_id && getList()
    getExpress()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, search_btn, pubParams, pubRefreshParams, getdata } = OneLoad()

// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})

function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
        express_id: exp_id,
        valuation_type: valuation_types.value,
        express_title: express_title.value,
        company_title: company_title.value,
    }
    getdata("express/shipping/index", params)
}

// 搜索
const valuation_types = ref("") // 计费方式[0:全部,1:按件数,2:按重量,3:按体积,4:按装箱]
const express_title = ref("")
const company_title = ref("")
const handleSearch = () => {
    search_btn.value = true
    pubRefreshParams(getList)
}

/**
 * 添加快递方式
 * @property {Boolean} dialogUpdate 弹窗状态
 * @property {Boolean} form_loading 提交按钮状态
 * @property {String} company_id 物流公司ID
 * @property {Function} addTemplate 点击添加
 * @property {Function} confirmTemplate 确认保存
 * @property {Function} handleDelete 删除
 * @property {Function} closeTemplate 关闭弹窗
 */
const dialogUpdate = ref(false)
const form_loading = ref(false)
const company_id = ref("")
const addTemplate = () => {
    dialogUpdate.value = true
}
const confirmTemplate = () => {
    if (company_id.value == "") {
        proxy.$message({ message: "请选择快递方式！", type: "warning" })
        return
    }
    form_loading.value = true
    proxy.$axios
        .post("express/shipping/add", {
            express_id: exp_id,
            company_id: company_id.value,
        })
        .then((res) => {
            form_loading.value = false
            if (res.data.code == 0) {
                dialogUpdate.value = false
                proxy.$message({ message: '添加成功！', type: "success" })
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            form_loading.value = false
        })
}
const closeTemplate = () => {
    dialogUpdate.value = false
    company_id.value = ""
}
const handleDelete = (row) => {
    proxy.$axios
        .post("express/shipping/delete", {
            shipping_id: row.shipping_id,
        })
        .then((res) => {
            if (res.data.code == 0) {
                proxy.$message({ message: '删除成功！', type: "success" })
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

// 获取快递方式
const options_express = ref([])
const valuation_type = ref("")
const changeSelect = (val) => {
    let arrs = ["按件数", "按重量", "按体积", "按装箱"]
    for (let i = 0; i < options_express.value.length; i++) {
        if (options_express.value[i].company_id == val) {
            valuation_type.value = arrs[options_express.value[i].valuation_type]
            return
        }
    }
}
function getExpress() {
    proxy.$axios
        .get("express/shipping/add")
        .then((res) => {
            if (res.data.code == 0) {
                options_express.value = res.data.data
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

// 配置区域
const clickConfig = (id) => {
    router.push({
        path: "/Setup/ConfigArea",
        query: {
            sid: id,
        },
    })
}
</script>
<script>
export default {
    name: "LogisticsList",
}
</script>

<style lang="less" scoped>
.tag-item {
    display: flex;
    align-items: center;

    .tag-item__label {
        flex: none;
        text-align: right;
        width: 120px;
        padding-right: @padding-md;
        font-size: @font-size-md;
        color: @gray-8;
    }

    .tag-item__right {
        flex: none;
        width: 300px;
    }
}
</style>

<style>
.el-popper {
    max-width: 500px;
}
</style>
